
<template>
  <div>
    <header>
      <van-nav-bar title="特色课" left-arrow>
        <template #right>
          <van-icon name="search" size="18" @click="$router.push('search')" />
        </template>
      </van-nav-bar>
    </header>
    <!-- 下拉菜单 -->
    <van-dropdown-menu>
      <van-dropdown-item title="分类" ref="item">
        <div class="but1" style="padding: 5px 16px">
          <van-button class="but">重置</van-button>
          <van-button class="but" type="warning"> 确认 </van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item @change="dit" v-model="value2" :options="option2" />
      <van-dropdown-item title="筛选" ref="item">
        <van-cell center>
          <template #right-icon>
            <ul class="li1">
              <li
                @click="tab(index, item.id)"
                :class="{ active: tabIndex == index }"
                v-for="(item, index) in kc"
                :key="index"
              >
                {{ item.title }}
              </li>
            </ul>
          </template>
        </van-cell>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul class="box">
          <li v-for="(item, index) in courseList" :key="index">
            <h2>{{ item.title }}</h2>
            <p class="p">
              {{ item.start_play_date | times }} | 共{{ item.sales_num }}课时
            </p>
            <div class="box1">
              <img :src="item.teachers_list[0].teacher_avatar" alt="" />
              <span class="p">{{ item.teachers_list[0].teacher_name }}</span>
            </div>
            <div class="box2">
              <p class="p">{{ item.brows_num }}人已报名</p>
              <h2>免费</h2>
            </div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { coursebasis } from "../request/http";
import {
  NavBar,
  Icon,
  DropdownMenu,
  DropdownItem,
  Button,
  List,
  Cell,
  PullRefresh,
} from "vant";
export default {
  name: "course",
  data() {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      courseList: [],
      tabIndex: "",
      params: {
        page: 1,
        order_by: 0,
        course_type: 0,
        classify_id: 0,
        limit: 10,
      },
      value2: 1,
      option2: [
        { text: "综合排序", value: 1 },
        { text: "最新", value: 2 },
        { text: "最热", value: 3 },
        { text: "价格从高到低", value: 4 },
        { text: "价格从高到低", value: 5 },
      ],
      kc: [
        {
          title: "全部",
          isActive: true,
          id: 0,
        },
        {
          title: "大班课",
          isActive: false,
          id: 2,
        },
        {
          title: "小班课",
          isActive: false,
          id: 3,
        },
        {
          title: "公开课",
          isActive: false,
          id: 4,
        },
        {
          title: "视频课",
          isActive: false,
          id: 5,
        },
        {
          title: "面授课",
          isActive: false,
          id: 6,
        },
        {
          title: "音频课",
          isActive: false,
          id: 8,
        },
        {
          title: "系统课",
          isActive: false,
          id: 9,
        },
        {
          title: "图文课",
          isActive: false,
          id: 10,
        },
        {
          title: "会员课",
          isActive: false,
          id: 1,
        },
      ],
    };
  },
  filters: {
    times(val) {
      let time = new Date(val).toLocaleString();
      return time;
    },
  },
  mounted() {
    coursebasis({
      page: this.params.page,
      limit: this.params.limit,
    }).then((res) => {
      console.log(res);
      this.courseList = res.list;
    });
  },
  methods: {
    tab(status, id) {
      this.tabIndex = status;
      console.log(status);
      coursebasis({
        course_type: id,
      }).then((res) => {
        console.log(res);
        this.courseList = res.list;
      });
    },
    dit(value) {
      console.log(value);
      coursebasis({
        order_by: value,
      }).then((res) => {
        console.log(res);
        this.courseList = res.list;
      });
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
      setTimeout(() => {
        Toast("刷新成功");
        this.refreshing = false;
        this.count++;
      }, 1000);
    },
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
  },
};
</script>

<style lang="scss" scoped>
.but1 {
  display: flex;
  justify-content: space-around;
  .but {
    width: 160px;
    margin: 30px 0;
  }
}
.li1 {
  width: 100%;
  display: flex;
  justify-content: space-around;
  justify-content: flex-start;
  flex-wrap: wrap;
  li {
    width: 150px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    background-color: #f5f5f5;
    margin: 18px;
  }
  .active {
    background-color: #ebeefe;
    color: red;
  }
}
.box {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  li {
    background-color: #fff;
    margin-top: 20px;
    box-sizing: border-box;
    padding: 20px 10px;
  }
  .box1 {
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
  .box2 {
    display: flex;
    justify-content: space-between;
    h2 {
      color: #44a426;
    }
  }
  .p {
    color: rgb(163, 163, 163);
  }
}
</style>